﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>后台</title>
    <script src="/Apm/js/Form.js" type="text/javascript"></script>
    <style type="text/css">
        html, body, .form {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        body {
            font: normal 100% Helvetica, Arial, sans-serif;
            margin: 0;
        }

        .form-top {
            display: flex;
            justify-content: space-between;
            padding: 0.4rem 1rem;
            background-color: #393D49;
        }

        .logo {
            padding-top: 0.4rem;
        }

            .logo img {
                width: 3rem;
                height: 3rem;
                border-radius: 1rem;
            }

        .top-navigation li {
            margin: 0 1.5rem;
        }

        .form-center {
            display: flex;
            justify-content: space-between;
            height: calc(100% - 8rem );
        }

        .center-left {
            width: 13rem;
            background-color: #2F4056;
            overflow-y: auto;
        }

            .center-left ul {
                width: 100%;
                background-color: #2F4056;
            }

        .center-right {
            width: calc(100% - 13rem);
        }

        .layui-tab, .layui-tab-item {
            height: 100%;
        }

        .layui-tab {
            margin: 0;
        }

        .form-tab-content {
            margin: 0;
            padding: 0;
            height: calc(100% - 40px );
        }

            .form-tab-content iframe {
                border: 0;
                width: 100%;
                height: 100%;
            }

        .form-bottom {
            height: 3.5rem;
            background-color: #2F4056;
        }

        .form-nav-child {
            text-indent: 1rem;
        }

        .layui-this {
            background-color: #eeeeee;
        }
        /****滚动条*****/
        ::-webkit-scrollbar {
            width: 0 !important;
        }

        cite {
            font-style: normal;
        }

        /*****密码修改样式*****/
        .paw-title {
            display: flex;
            justify-content: center;
            padding: 0.8rem;
            background-color: #009688;
            font-family: '楷体';
            font-size: 1.2rem;
            font-weight: bold;
            color: #fff;
        }

        .paw-form {
            padding: 1rem;
        }
        
    </style>
</head>
<body>
    <div class="form">
        <!--top begin-->
        <div class="form-top">
            <div class="logo">
                <img src="/image/logo.png" />
            </div>
            <div class="top-navigation">
                <ul class="layui-nav" lay-filter="topnav">
                    <!--<li class="layui-nav-item">
                        <a>控制台<span class="layui-badge">9999</span></a>
                    </li>-->
                    <li class="layui-nav-item">
                        <a><img id="userphoto" src="/image/boy.png" class="layui-nav-img"><span id="username"></span></a>
                        <dl class="layui-nav-child">
                            <dd><a id="revisepaw">修改密码</a></dd>
                            <dd><a id="quit">安全退出</a></dd>
                        </dl>
                    </li>
                </ul>
            </div>
        </div>
        <!--top end-->
        <div class="form-center">
            <!--left begin-->
            <div class="center-left">
                <ul class="layui-nav layui-nav-tree" id="view" lay-filter="leftnav">
                    <!--<li class="layui-nav-item">
                        <a>
                            <span class="form-icon">
                                <img src="/icon/wrench.png"/>
                            </span>   
                            <span>系统设置</span>
                        </a>
                        <dl class="layui-nav-child form-nav-child">
                            <dd>
                                <a id="userset" data-url="http://www.baidu.com">
                                    <span class="form-icon">
                                        <img src="/icon/user.png" />
                                    </span> 
                                    <cite>人员管理</cite>
                                </a>
                            </dd>
                            <dd>
                                <a id="quanxianset" data-url="http://www.layui.com/doc/element/nav.html">
                                    <span class="form-icon">
                                        <img src="/icon/drive_key.png" />
                                    </span>
                                    <cite>权限管理</cite>
                                </a>
                            </dd>
                            <dd>
                                <a id="mokuaiset" data-url="http://www.json.cn/">
                                    <span class="form-icon">
                                        <img src="/icon/computer_go.png" />
                                    </span>
                                    <cite>模块管理</cite>
                                </a>
                            </dd>
                        </dl>
                    </li>-->
                    
                </ul>
            </div>
            <!--left end-->

            <!--right begin-->
            <div class="center-right">
                <div id="righttab" class="layui-tab" lay-filter="righttab">
                    <ul class="layui-tab-title">
                        <li class="layui-this" lay-id="index">
                            <i class="layui-icon">&#xe68e;</i>   
                            <cite data-id="index">首页</cite>
                        </li>
                    </ul>
                    <div class="layui-tab-content form-tab-content">
                        <div class="layui-tab-item layui-show">
                            <iframe id="indexiframe" src="/Index/Index.html"></iframe>
                        </div>
                    </div>
                </div>
            </div>
            <!--right end-->
        </div>

        <!--bottom begin-->
        <div class="form-bottom">

        </div>
        <!--bottom end-->
    </div>
    
</body>
<div id="PawEditModel">
    <div class="paw-title">
        <span>密码修改</span>
    </div>
    <div class="layui-form layui-form-pane paw-form">
        <div class="layui-form-item">
            <label class="layui-form-label paw-label">原密码</label>
            <div class="layui-input-block">
                <input id="OldPaw" type="password" name="OldPaw"  placeholder="请输入原密码" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label paw-label">新密码</label>
            <div class="layui-input-block">
                <input id="NewPaw" type="password" name="NewPaw"  placeholder="请输入新密码" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label paw-label">确认密码</label>
            <div class="layui-input-block">
                <input id="TrueNewPaw" type="password" name="TrueNewPaw"  placeholder="请确认密码" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>
</div>
</html>
<!--第一步：编写模版。你可以使用一个script标签存放模板，如：-->
<script id="Menu" type="text/html">
   {{#  layui.each(d, function(index, item){ }}
    <li class="layui-nav-item">
        <a>
            <i class="iconfont">{{item.MenuIcon}}</i>
            <span>{{item.MenuName}}</span>
        </a>
        <dl class="layui-nav-child form-nav-child">
            {{#  layui.each(item.children, function(index, item){ }}
            <dd>
                <a id="{{item.MenuEnglish}}" data-url="{{item.MenuUrl}}">
                    <i class="iconfont">{{item.MenuIcon}}</i>
                    <cite>{{item.MenuName}}</cite>
                </a>
            </dd>
            {{#  }); }}
        </dl>
    </li>     
  {{#  }); }}
</script>
<script type="text/javascript">
    
    //注意：导航 依赖 element 模块，否则无法进行功能性操作
    layui.use(['element', 'layer'], function () {
        var layer = layui.layer,
            element = layui.element;

        //安全退出
        $("#quit").click(function () {
            layer.confirm('确认安全退出系统?', { icon: 3, title: '提示' }, function (index) {
                
                location.href = "/login.html";
                localStorage.clear();//清空存储的值
                sessionStorage.clear();
                layer.close(index);
            });
            
        });
        //修改密码
        $("#revisepaw").click(function () {
            PawEdit();
        })
        //监听左侧导航点击事件
        element.on('nav(leftnav)', function (elem) {
            
            var navid = elem.context.children[0].id;
            var navurl = $("#" + navid).data('url');
            var navimg = $("#" + navid+" i").html();
            var navcite = $("#" + navid + " cite").text();
            AddTab(navid, navurl, navimg, navcite);
            
        });
        //监听tab切换
        layui.use('element', function () {
            var element = layui.element;

            element.on('tab(righttab)', function (data) {
                //父页面调用子页面方法（iframe为iframe标签的name属性）
                //iframe.window.BindData();
                var id = $(this).attr('lay-id');
                if (id == "index") {
                    $("#indexiframe").attr("src", $("#indexiframe").attr("src"));
                }
                else {
                    $("iframe[data-frameid='" + id + "']").attr("src", $("iframe[data-frameid='" + id + "']").attr("src"))//切换后刷新框架
                }
                
            });

        });
       
        MenuList();
        GetUserInfo();
        
    });
    /**
     * 修改密码
     */
    function PawEdit() {
        layui.use('layer', function () {
            var layer = layui.layer;

            layer.open({
                type: 1,
                title: false,
                content: $("#PawEditModel"), //这里content是一个普通的String
                btn: ['确定', '关闭'],
                yes: function (index, layero) {
                    var OldPaw = $("#OldPaw").val();
                    var NewPaw = $("#NewPaw").val();
                    var TrueNewPaw = $("#TrueNewPaw").val();
                    if (OldPaw === "") {
                        layer.msg("原密码必填");
                        return;
                    }
                    if (NewPaw === "") {
                        layer.msg("新密码必填");
                        return;
                    }
                    if (TrueNewPaw === "") {
                        layer.msg("确认密码必填");
                        return;
                    }
                    if (TrueNewPaw !== NewPaw) {
                        layer.msg("两次密码输入不一样");
                        return;
                    }
                    var json = new Object();
                    json.OldPassword = OldPaw;
                    json.NewPassword = NewPaw;
                    //ajax验证原密码，更新密码
                    $.ajax({
                        url: ApiURL + 'api/Method/PasswordUpdate?Token=' + MyPublic.getToken(),
                        type: 'post',
                        contentType: 'application/json',
                        data: JSON.stringify(json),
                        success: function (data) {
                            data = JSON.parse(data);
                            if (data.code === "10001") {
                                layer.msg('修改成功');
                                layer.close(index);
                            }
                            else {
                                layer.msg(data.msg);
                            }
                        },
                        error: function (XMLHttpRequest) {
                            var state = XMLHttpRequest.status;
                            if (state === 401) {
                                layer.confirm('登陆凭证已过期，请重新登陆！', { icon: 2, title: '警告' }, function (index) {

                                    location.href = "/login.html";
                                    localStorage.clear();//清空存储的值
                                    sessionStorage.clear();
                                    layer.close(index);
                                });
                            }
                            else {
                                location.href = "/error.html"
                            }

                        }
                    })
                }
            });
        });   
               
    }
    /**
     * 获取菜单
     */
    function MenuList() {
        layui.use(['element','laytpl'], function () {
            var element = layui.element,
                laytpl = layui.laytpl;

            var getTpl = Menu.innerHTML
            var view = document.getElementById('view');
            ajaxget({
                url: 'api/Method/MenuGet?Token=' + MyPublic.getToken(),
                success: function (data) {
                    data = JSON.parse(data);
                    laytpl(getTpl).render(data, function (html) {
                        view.innerHTML = html;
                    });
                    element.render('nav', 'leftnav');//重新加载左侧模块
                }
            })
            
        })
        
    }
    /**
     * 获取用户信息
     */
    function GetUserInfo() {

        layui.use(['element','layer'], function () {
            var element = layui.element,
                layer = layui.layer;

            $.ajax({
                url: ApiURL + 'api/Method/PersonalGet?Token=' + MyPublic.getToken(),
                type: 'get',
                contentType: 'application/json',
                success: function (data) {
                    data = JSON.parse(data);
                    if (data.code === "0") {
                        //绑定用户信息
                        var photo = data.data.PictureUrl;
                        var name = data.data.Name;
                        var sex = data.data.Sex;

                        if (photo != null && photo != "") {
                            $("#userphoto").attr('src', ApiURL + photo);
                        }
                        else {
                            if (sex === "1") {
                                $("#userphoto").attr('src', '/image/boy.png');
                            }
                            else {
                                $("#userphoto").attr('src', '/image/girl.png');
                            }
                        }

                        $("#username").html(name);
                        element.render('nav', 'topnav');//重新加载顶部模块
                    }
                    else {
                        layer.msg(data.msg);
                    } 
                },
                error: function (XMLHttpRequest) {
                    var state = XMLHttpRequest.status;
                    if (state === 401) {
                        layer.confirm('登陆凭证已过期，请重新登陆！', { icon: 2, title: '警告' }, function (index) {

                            location.href = "/login.html";
                            localStorage.clear();//清空存储的值
                            sessionStorage.clear();
                            layer.close(index);
                        });
                    }
                    else {
                        location.href = "/error.html"
                    }
                    
                }
            })
            
        })
 
    }
    
    /**
     * 新增tab
     * @param navid tab标题的lay-id属性值
     * @param navurl iframe显示的页面
     * @param navicon 标题显示的图标 &#xe703;
     * @param navcite 标题内容
     */
    function AddTab(navid, navurl, navicon, navcite) {
        layui.use('element', function () {
            var element = layui.element;

            var count = 0;
            var tabtitle = '<i class="iconfont">' + navicon + '</i>';
            tabtitle += '<cite data-id="' + navid + '">' + navcite + '</cite>';
            tabtitle += '<i onclick="DeleteTab(\'' + navid + '\')" class="layui-icon layui-unselect layui-tab-close">&#x1006;</i>';
            //alert(navimg);
            $("#righttab").find('li').each(function () {
                var tabid = $(this).children('cite').data('id');
                //alert(tabid);
                if (tabid === navid) {
                    count++;
                }
            });

            //判断tab是否存在
            if (count === 0) {
                //不存在
                element.tabAdd('righttab', {
                    title: tabtitle,
                    content: '<iframe data-frameid="' + navid + '" name="iframe" src="' + navurl + '"></iframe>',
                    id: navid
                });

                element.tabChange('righttab', navid);

            }
            else {
                //存在
                element.tabChange('righttab', navid);
                $("iframe[data-frameid='" + navid + "']").attr("src", $("iframe[data-frameid='" + navid + "']").attr("src"))//切换后刷新框架
            }
        });
        
    }

    /**
     * 删除tab
     * @param layid tab标题的lay-id属性值
     */
    function DeleteTab(layid) {
        layui.use('element', function () {
            var element = layui.element;

            element.tabDelete('righttab', layid);
        });
    }
    
    
</script>